<template>
    <Myhead title="分类"></Myhead>

    <div class="classify">
        <!-- 左侧导航 -->
        
        <van-sticky class="stiky" :offset-top="100" :offset-bottom="100">
            <div class="left-grid">
            <van-sidebar @change="changeNav" v-model="active">
                <van-sidebar-item v-for="item, index in leftList" :title="leftList[index]" />
         </van-sidebar>
        </div>
        </van-sticky> 
        <!-- 右侧内容 -->
        <div class="right-grid">
            <!-- 导航全部 -->
            <div v-if="active == 0">
                <div class="right-class" v-for="item, index in categoryList">
                    <p> {{ item.title }} </p>
                    <p>
                        <van-icon name="chat-o">
                            {{ item.address }}
                        </van-icon>
                    </p>

                    <p class="time">
                        <van-icon name="chat-o">
                            {{ item.time }}
                        </van-icon>
                        <van-icon name="chat-o">
                            {{ item.hot }}
                        </van-icon>
                    </p>
                    <p>
                        <van-icon name="chat-o">
                            {{ item.author.username }}
                        </van-icon>
                    </p>
                    <div class="lable">
                        <van-tag v-for="tag, index in item.tags" type="primary">
                            {{ tag.label }}
                        </van-tag>

                    </div>

                    <div>
                        <van-image width="95%" height='300' :v-lazy="urllist[index]" />
                        <p>

                        </p>
                    </div>
                    <div>
                        <van-row class="row" justify="center">
                            <van-col span="8">
                                <van-icon name="good-job-o">
                                    1
                                </van-icon>
                            </van-col>
                            <van-col span="8">
                                <van-icon name="share-o">

                                    1
                                </van-icon>
                            </van-col>
                            <van-col span="7">
                                <van-icon name="like-o">
                                    1
                                </van-icon>
                            </van-col>
                        </van-row>

                    </div>
                </div>
            </div>
            <!-- 细分导航 -->
            <div  v-else>
                <div class="right-class" v-for="item, index in newarr1">
                <p> {{ item.title }} </p>
                <p>
                    <van-icon name="chat-o">
                        {{ item.address }}
                    </van-icon>
                </p>

                <p class="time">
                    <van-icon name="chat-o">
                        {{ item.time }}
                    </van-icon>
                    <van-icon name="chat-o">
                        {{ item.hot }}
                    </van-icon>
                </p>
                <p>
                    <van-icon name="chat-o">
                        {{ item.author.username }}
                    </van-icon>
                </p>
                <div class="lable">
                    <van-tag v-for="tag, index in item.tags" type="primary">
                        {{ tag.label }}
                    </van-tag>

                </div>

                <div>
                    <van-image width="95%" height='300' :src="urllist[index]" />
                    <p>

                    </p>
                </div>
                <div>
                    <van-row class="row" justify="center">
                        <van-col span="8">
                            <van-icon name="good-job-o">
                                1
                            </van-icon>
                        </van-col>
                        <van-col span="8">
                            <van-icon name="share-o">

                                1
                            </van-icon>
                        </van-col>
                        <van-col span="7">
                            <van-icon name="like-o">
                                1
                            </van-icon>
                        </van-col>
                    </van-row>

                </div>
            </div>
            </div>
        </div>
    </div>
</template>


<script setup>
import { ref } from 'vue'
import { GetCategoryAPI } from '@/views/Classify/classapi'
import { onMounted } from 'vue'
const active = ref(0);
// let leftList = ref(['全部'])
let leftList = [
    '全部', '户外', '露营', '寺庙', '游乐场', '亲子', '轮渡', '跳伞', '农场', '绿道', '爬山', '野钓', '滑雪', '酒店', '公园', '攀岩', '古迹', '漂流'
]
const urllist = ref([])
console.log('active', active.value);
// console.log('leftList',leftList.value);

// 获取分类
let categoryList = ref([])
// let leftCategory = ref([])
let GetCategory = async () => {
    let res = await GetCategoryAPI()

    if (res.data.code == 200) {
        // let array = res.data.result
        categoryList.value = res.data.result

        // array.forEach((item) => {
        //     leftCategory.value.push(item)
        // })

        // let arr4 = []
        // leftCategory.value.forEach((i) => {
        //     let newarr = []
        //     let arr3 = []

        //     newarr.push(i.tags)
        //     newarr.forEach((t) => {
        //         t.forEach((s) => {
        //             arr3.push(s.label)
        //         })
        //     })

        //     arr4.push(...arr3)
        // })
        // leftList.value.push(...new Set(arr4))
        // console.log(' leftList.value ', leftList.value);
    }
}

// 切换分类
let leftContent = ref([])
let newarr1 = ref([])

let changeNav = (val) => {
    leftContent.value = leftList[val] // 点击的分类
    console.log(' leftContent.value', leftContent.value);
    let newarr = categoryList.value.map((item) => {
        let newtags = JSON.parse(JSON.stringify(item.tags))
        let newtags2 = newtags.filter((item1) => { return item1.label == leftContent.value })
        // console.log(newtags2);
        if (newtags2.length) {
            // console.log(11111);
            return item
        }
    })
    newarr1.value = newarr.filter((item) => {
        return item != undefined
    })
    newarr1.value.forEach((item) => {
        let url = item.imgs[0].url.replace('public', 'http://81.69.235.62:3000');
        urllist.value.push(url)
    })

}

// 全部分类

onMounted(() => {
    changeNav()
    GetCategory()
})

</script>

<style lang="scss" scoped>
.classify {
    display: flex;
    height: 100%;
    .stiky{
        background-color: antiquewhite;
        // height: 1000px;
    }
   
    // position: absolute;
    .left-grid {
        height: 80%;
        overflow-y: auto; 
        // position: relative;
      
    }

    .right-grid {
        flex: 1;
        //  width: 75%;
         height: 100%;
        :first-child.right-class {
            margin-top: 10px;
        }

        .right-class {
            width: 88%;
            margin-left: 9px;
            padding: 10px;
            margin-top: 20px;
            border-radius: 10px;
            border: 1px solid red;

            p {
                margin-top: 10px;
            }

            .time {
                display: flex;
                justify-content: space-between;
            }
        }

        .lable {
            .van-tag {
                margin-top: 10px;
                margin-right: 10px;
                margin-bottom: 10px;
            }
        }

        .row {
            margin-top: 40px;
            margin-left: 10px;
            font-size: 16px;
            // background-color: black;
        }
    }
}
</style>
